<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<title>修改密码</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<script src="js/rem.js"></script>
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="css/base.css"/>
	<link rel="stylesheet" type="text/css" href="css/page.css"/>
	<link rel="stylesheet" type="text/css" href="css/all.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/loading.css"/>
	<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css"/>
	<link href="css/mui.picker.css" rel="stylesheet"/>
	<script type="text/javascript">
		$(window).load(function () {
			$(".loading").addClass("loader-chanage")
			$(".loading").fadeOut(300)
		})
	</script>
</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
		<div class="loader-inner pacman">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
</div>
<!--loading页结束-->
<body>
<!--header star-->
<header class="mui-bar mui-bar1 mui-bar-nav mui-bar-nav1" id="header">
	<a class="btn" href="javascript:history.go(-1)">
		<i class="iconfont icon-fanhui"></i>
	</a>
	<div class="top-sch-box top-sch-boxtwo top-sch-boxthree flex-col">
		返回
	</div>
</header>
<!--header end-->

<div class="warp warpthree clearfloat">
	<div class="h-top h-toptwo clearfloat box-s">
		<p class="tu"><img id="avatar-img" style="border-radius:50%" src="img/touxiang.png"/></p>
		<p class="nr loginname">王小王<span>普通会员</span></p>
	</div>
	<div class="apply recharge clearfloat">
		<div class="appxiugai clearfloat">
			<ul>
				<li class="ra3 fl">

					<i class="iconfont icon-mima fl"></i>
					<input type="text" name="" id="newPwd" value="" placeholder="请输入新密码"/>

				</li>
				<li class="ra3 fl">
					<i class="iconfont icon-mima fl"></i>
					<input type="text" name="" id="oldPwd" value="" placeholder="确认输入原始密码"/>
				</li>
			</ul>
		</div>
		<div class="xia clearfloat">
			<a id="btnSubmit" href="#" class="db fl btn ra3">确定</a>
			<a href="center.html" class="db fr btn ra3">取消</a>
		</div>
	</div>
</div>

<!--footer star-->
<footer class="page-footer fixed-footer" id="footer">
	<ul>
		<li>
			<a href="index.html">
				<i class="iconfont icon-shouye"></i>
				<p>商城</p>
			</a>
		</li>
		<li>
			<a href="#">
				<i class="iconfont icon-erweima1"></i>
				<p>二维码</p>
			</a>
		</li>
		<li>
			<a href="#">
				<i class="iconfont icon-kefu1"></i>
				<p>客服</p>
			</a>
		</li>
		<li class="active">
			<a href="center.html">
				<i class="iconfont icon-yonghuming"></i>
				<p>我的</p>
			</a>
		</li>
	</ul>
</footer>
<!--footer end-->
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/mui.picker.min.js"></script>
<script src="js/others.js"></script>
<script type="text/javascript" src="js/hmt.js"></script>
<script src="slick/slick.js" type="text/javascript"></script>
<!--插件-->
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.jquery.min.js"></script>
<script type="text/javascript">


	var changePasswordUrl = "/users/changePassword"

	$(function () {
		//未登陆则返回登陆界面
		$.get("/users/getUserInfo", function (result) {
			if (result.state == 1000) {
				let user = result.user;
				// $("#hname").val(user.username)
				$(".loginname").text(user.username)
				$("#fullname").val(user.usernameFull)
				$("#htel").val(user.phone)
				$("#avatar-img").attr("src", user.avatar)
			} else {
				window.location.href = "login.html";
			}
		});


		// 页面就绪事件
		// 为提交按钮添加点击事件
		$("#btnSubmit").click(function () {
			// 获取表单数据
			var oldPwd = $("#oldPwd").val();
			var newPwd = $("#newPwd").val();


			// var divArr = $("div.has-success");
			// if (divArr.length != 3) { // 存在异常项
			//     return;
			// }

			// 两次密码一致
			var flag = true;
			flag = checkNotSame("newPwd", "oldPwd", "新密码不能与旧密码一致") && flag;

			// 有验证异常则不提交表单
			if (flag == false) {
				return;
			}

			// 提交表单
			var params = {
				oldPassword: oldPwd,
				newPassword: newPwd
			}
			// 发送AJAX请求
			$.post(changePasswordUrl, params, function (result) {
				// 处理响应数据
				if (result.state == 1000) { // 正常响应
					alert("密码修改成功");
					// 清空表单数据
					$("#oldPwd").val("");
					$("#newPwd").val("");
					$.post("/users/logout", function (result) {
						history.replaceState(null, null, 'login.html')
						window.location.reload()
					});

				} else { // 异常响应
					alert(result.msg);
				}
			});
		});
		// 为密码输入框添加失去焦点事件
		$("#oldPwd").blur(function () {
			checkEmpty("oldPwd", "原始密码不能为空");
		});
		// 为密码输入框添加失去焦点事件
		$("#newPwd").blur(function () {
			checkEmpty("newPwd", "新密码不能为空");
		});

	});

	function checkNotSame(oldVal, newVal, msg) {
		if ($("#" + oldVal).val() == $("#" + newVal).val()) { // 为空
			$("#" + newVal).parents(".form-group").addClass("has-error").removeClass("has-success");
			$("#" + newVal).next("span").text(msg);
			return false;
		} else { // 不为空
			$("#" + newVal).parents(".form-group").removeClass("has-error").addClass("has-success");
			// 找到input相邻的span，在其中添加错误提示信息
			$("#" + newVal).next("span").text("");
			return true;
		}
	}

	function checkEmpty(name, msg) {
		if ($("#" + name).val() == "") { // 为空
			$("#" + name).parents(".form-group").addClass("has-error").removeClass("has-success");
			// 找到input相邻的span，在其中添加错误提示信息
			$("#" + name).next("div samp").text(msg);
			return false;
		} else { // 不为空
			$("#" + name).parents(".form-group").removeClass("has-error").addClass("has-success");
			// 找到input相邻的span，在其中添加错误提示信息
			$("#" + name).next("div samp").text("");
			return true;
		}
	}
</script>
</html>
